<template>
  <div class="page-main">
    <!--页头 -->
    <Header></Header>
    <div class="register">
      <!-- 表单 -->
      <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form" label-width="100px">
        <h3 class="title">找回密码</h3>
        <div class="tip-info">
          <el-icon>
            <InfoFilled />
          </el-icon>
          请输入你需要找回登录密码的账号名
        </div>
        <el-form-item label="手机号" prop="mobilePhone">
          <el-input v-model="registerForm.mobilePhone" type="text" size="large" auto-complete="off" placeholder="请输入手机号">
            <template #prefix><svg-icon icon-class="phone" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userCode">
          <el-input v-model="registerForm.userCode" type="text" size="large" auto-complete="off" placeholder="请输入用户名">
            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item label="设置密码" prop="password">
          <el-input v-model="registerForm.password" type="password" size="large" auto-complete="off" placeholder="请输入密码"
            @keyup.enter="handleFind">
            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="registerForm.confirmPassword" type="password" size="large" auto-complete="off"
            placeholder="请输入确认密码" @keyup.enter="handleFind">
            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="captchaOnOff">
          <el-input size="large" v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
            @keyup.enter="handleFind">
            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
          </el-input>
          <div class="register-code">
            <img :src="codeUrl" @click="getCode" class="register-code-img" />
          </div>
        </el-form-item>
        <el-form-item class="btn-grounp">
          <el-button :loading="loading" size="large" type="primary" @click.prevent="handleFind">
            <span v-if="!loading">确 认</span>
            <span v-else>找 回 中...</span>
          </el-button>
          <el-button size="large" @click.prevent="handleBack">返 回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 页脚 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
// 引入页头组件
import Header from "@/components/Header";
// 引入底部组件
import Footer from "@/components/Footer";
import { ElMessageBox } from "element-plus";
// 引入接口
import { resetPasswordApi, getCodeImg } from "@/api/login";

// 当前实例
const { proxy } = getCurrentInstance();
// 全局路由
const router = useRouter();

// 找回表单
const registerForm = ref({
  userCode: "",
  mobilePhone: "",
  password: "",
  confirmPassword: "",
  code: "",
  uuid: ""
});
// 密码校验
const validatorPassword = (rule, value, callback) => {
  const pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}');
  if (!pwdRegex.test(value)) {
    callback(new Error("用户密码长度为8-20位，且必须包含字母、数字、特殊字符。"));
  } else {
    callback();
  }
};
// 密码匹配
const equalToPassword = (rule, value, callback) => {
  if (registerForm.value.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
// 表单验证规则
const registerRules = {
  userCode: [
    { required: true, trigger: "blur", message: "请输入您的用户名" },
  ],
  mobilePhone: [
    { required: true, trigger: "blur", message: "请输入您的手机号" },
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    { validator: validatorPassword, trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, trigger: "blur", message: "请再次输入您的密码" },
    { required: true, validator: equalToPassword, trigger: "blur" }
  ],
  // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};
// 是否开启加载动画
const loading = ref(false);
// 验证码地址
const codeUrl = ref("");
// 是否启用验证码
const captchaOnOff = ref(false);

// 找回事件
function handleFind() {
  proxy.$refs.registerRef.validate(valid => {
    if (valid) {
      loading.value = true;
      resetPasswordApi({
        ...registerForm.value
      }).then(res => {
        const userCode = registerForm.value.userCode;
        ElMessageBox.alert("<font color='red'>恭喜你，您的用户名 " + userCode + "密码找回成功！马上去登录？</font>", "系统提示", {
          dangerouslyUseHTMLString: true,
          type: "success",
        }).then(() => {
          router.push("/login");
        });
      }).catch((err) => {
        loading.value = false;
        proxy.$modal.msgError(err || '您输入的用户名或手机号错误，请检查并重新输入！');
        if (captchaOnOff.value) {
          getCode();
        }
      });
    }
  });
}
// 返回按钮事件
function handleBack() {
  router.go(-1);
}

// 获取验证码
function getCode() {
  getCodeImg().then(res => {
    captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
    if (captchaOnOff.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      registerForm.value.uuid = res.uuid;
    }
  });
}

// 挂载
onMounted(() => {
  if (captchaOnOff.value) {
    // 获取验证码
    getCode();
  }
})
</script>

<style lang='scss' scoped>
.page-main {
  min-height: 100%;
  background-color: #eeeeee;
}

.register {
  display: flex;
  justify-content: center;
  height: 100%;
  height: calc(100% - 120px);
  // background-image: url("../assets/images/bg-login.png");
  background-size: cover;

  // 表单
  .register-form {
    margin: 20px auto;
    border-radius: 6px;
    background: #ffffff;
    width: 800px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 40px;

      input {
        height: 40px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 0px;
    }

    // 按钮组
    .btn-grounp {
      :deep(.el-form-item__content) {
        margin: 0;
        margin-left: 100 !important;
        width: 100%;
        justify-content: center;
      }
    }
  }
}

// 标题
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  font-size: 28px;
  // color: #707070;
}

// 提示信息
.tip-info {
  padding-left: 36px;
  line-height: 60px;
  color: #707070;

  i {
    font-size: 20px;
    color: rgb(104, 181, 206);
    margin-right: 10px;
    top: 5px;
  }
}

.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.register-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.register-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>
